<template>
	<div class="yh_content foSi14">
		<div class="dis disAl disJuB mar-top20 pad0" style="border: none;">
			<div class="dis">
				<div>
					<div class="foSi13" style="height: 20px;color: #838383;">统计时间</div>
					<div class="dis">
						<div class="time-cycle__item time-first" @click.stop="statisticsClick(1)" :class="timeStatistics === 1?'curr':''">本月</div>
						<div class="time-cycle__item time-last" @click.stop="statisticsClick(2)" :class="timeStatistics === 2?'curr':''">上月</div>
						<el-date-picker v-model="birthday_start" style="width: 140px;margin-left: 5px;"
							size="small" type="date" placeholder="开始时间" @change="timeChange" :picker-options="{disabledDate:dateOptions}" />
						<el-date-picker v-model="birthday_end" style="width: 140px;margin-left: 5px;"
							size="small" type="date" placeholder="截至日期" @change="timeChange" :picker-options="{disabledDate:dateOptions}" />
					</div>
				</div>
<!--				<div class="mar-left5">-->
<!--					<div class="foSi13" style="height: 20px;color: #838383;">客户类型</div>-->
<!--					<el-select v-model="sort" style="width: 140px" size="small" placeholder="请选择">-->
<!--						<el-option v-for="(item,index) in sortList" :key="index" :label="item.name"-->
<!--							:value="item.id" />-->
<!--					</el-select>-->
<!--				</div>-->
				<div class="mar-left5">
					<div class="foSi13" style="height: 20px;color: #838383;">姓名/手机号</div>
					<el-input v-model="name" size="small" placeholder="姓名/手机号" />
				</div>
				<div class="mar-left10" style="padding-top: 20px;">
					<el-button type="primary" size="small" @click.stop="suosouClick">查询</el-button>
<!--					<el-button type="primary" class="mar-left5" size="small">导出报表</el-button>-->
				</div>
			</div>
			<el-popover popper-class="popo" placement="bottom" width="900" trigger="click">
				<div class="wid100">
					<div class="wid95 mar dis disAl" :class="index !== 0?'mar-top5':''" v-for="(item, index) in tsList" :key="index">
						<div class="fowe800">{{item.title}}</div>
						<div>{{item.text}}</div>
					</div>
				</div>
				<svg-icon slot="reference" icon-class="tishi" class="mar0 cuPo"
					style="color: #6b7cdd;width: 20px;height: 20px;" />
			</el-popover>
		</div>
		<div class="total-box mar-top20">总计收入共<var>{{ zong_money }}</var>元</div>
		<div style="margin-top: 20px">
			<el-table v-loading="listLoading" :data="list" stripe style="width: 100%">
				<div slot="empty" class="m-empty-box">
					<div class="mar" style="width: 168px;height: 180px;">
						<img src="https://www.jianyigongxiang.com/public/membercard/empty.png" class="wh100">
					</div>
					<div class="title">暂无数据</div>
				</div>
				<el-table-column label="排序" width="80">
					<template slot-scope="scope">
						<div class="wid100 hei44 dis disAl">
							<img v-if="scope.$index === 0 && listQuery.page === 1" style="width: 30px;height: 30px;" src="https://img.keepyoga.com/assets/img_cloud/v9.8.x/rank_1.png">
							<img v-if="scope.$index === 1 && listQuery.page === 1" style="width: 30px;height: 30px;" src="https://img.keepyoga.com/assets/img_cloud/v9.8.x/rank_2.png">
							<img v-if="scope.$index === 2 && listQuery.page === 1" style="width: 30px;height: 30px;" src="https://img.keepyoga.com/assets/img_cloud/v9.8.x/rank_3.png">
							<div v-if="scope.$index > 2 || listQuery.page > 1" class="textCen" style="width: 30px;">{{ scope.$index+1+(listQuery.page-1)*listQuery.limit }}</div>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="nickname" label="姓名" />
				<el-table-column prop="tel" label="手机号" />
				<el-table-column prop="member_type" label="客户类型	" />
				<el-table-column prop="hjgw" label="会籍顾问	" />
				<el-table-column prop="btotalprice" label="发卡收入	" />
<!--				<el-table-column prop="name" label="续卡收入	" />-->
<!--				<el-table-column prop="name" label="卡升级收入" />-->
<!--				<el-table-column prop="name" label="转卡收入	" />-->
				<el-table-column prop="cpay_money" label="付费预约收入	" />
<!--				<el-table-column prop="name" label="商品收入	" />-->
<!--				<el-table-column prop="name" label="班课收入	" />-->
<!--				<el-table-column prop="name" label="其他收入	" />-->
<!--				<el-table-column prop="name" label="退卡金额	" style="color: #f5934b;" />-->
<!--				<el-table-column prop="name" label="商品退货金额	" style="color: #f5934b;" />-->
<!--				<el-table-column prop="name" label="班课出班退款金额	" style="color: #f5934b;" />-->
				<el-table-column prop="bc_total" label="总计收入	" style="color: #6b7cdd;" />
				<el-table-column :label="$t('table.actions')" align="center"
					class-name="small-padding fixed-width">
					<template slot-scope="scope">
            <router-link :to="'/member/memberDetail?id='+scope.row.id">
              <div class="yh_dis cuPo" style="align-items: center; margin-right: 10px">
                <i class="el-icon-view" style="color: #6b7cdd; font-size: 20px" />操作
              </div>
            </router-link>
					</template>
				</el-table-column>
			</el-table>
			<pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
				@pagination="getList" />
		</div>
	</div>
</template>

<script>
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
	// import fetchList from '@/api/article'
  import {
    memberCostRanking, recordAlter
  } from '@/api/information.js';
	import {
		getXuan
	} from '@/utils/limits.js'
	import {
		mapGetters
	} from 'vuex' // Secondary package based on el-pagination

	export default {
		name: 'memberCostRanking',
		components: {
			Pagination
		},
		data() {
			return {
        zong_money:0,
				timeStatistics: 1,
				birthday_start: '',
				birthday_end: '',
				sortList: [
					{id: 1,name: '全部'},{id: 2,name: '会员'},{id: 3,name: '访客'}
				],
				sort: 1,
				name: '',
				list: [],
				total: 0,
				listLoading: false,
				listQuery: {
					page: 1,
					limit: 10
				},
				// 选择今天及今天以后的日期
				dateOptions(time) {
					return time.getTime() >= Date.now() - 8.64e6;
				},
				dateOptions1(time) {
					return time.getTime() < Date.now() - 8.64e7;
				},
				tsList: [
					{title: '发卡收入：',text: '包含馆主端和会员端自行下单办卡所产生的实收金额，不包括储值卡支付部分'},
					{title: '续卡收入：',text: '续卡实收金额，不包括储值卡支付部分'},
					{title: '卡升级收入：',text: '卡升级实收金额，不包括储值卡支付部分'},
					{title: '转卡收入：',text: '转卡手续费实收金额，不包括储值卡支付'},
					{title: '付费约课收入：',text: '通过付费约课产生的收入（不包含会员卡支付）'},
					{title: '商品收入：',text: '通过商品管理、分销商城、积分商城产生的实际支付金额，不包含储值卡支付的部分'},
					{title: '班课收入：',text: '包含入班、转班、续班产生的实际支付金额，不包含通过储值卡支付的部分'},
					{title: '其他收入：',text: '包含收费请假、收费停卡、收费视频课（不包含会员卡支付）、收费直播、补卡手续费、收费报名活动的实收金额'},
					{title: '退卡金额：',text: '只统计实际退卡金额，不包含以储值卡方式退卡金额（包含删除卡时卡内的剩余资产）'},
					{title: '商品退货金额：',text: '只统计实际退款金额，不包含以储值卡方式退款金额'},
					{title: '班课出班退款金额：',text: '只统计实际退款金额，不包含以储值卡方式退款金额'},
					{title: '总计收入：',text: '发卡收入+续卡收入+卡升级收入+付费预约收入+商品收入+班课收入+其他收入-退卡金额-商品退货金额-班课出班退款金额'},
					{title: '统计时间：',text: '统计时间可统计截止到昨日的数据'}
				]
			}
		},
		computed: {
			...mapGetters([
				'permission_routes',
				'roles'
			])
		},
		created() {
			var xuanList = [{
				name: '会员活跃分析',
				url: '/information/memberAnalysis',
				pd: true
			},
      //   {
			// 	name: '访客转化分析',
			// 	url: '/information/guestToMemberAnalysis',
			// 	pd: true
			// },
        {
				name: '贡献度排行',
				url: '/information/memberCostRanking',
				pd: true
			},
      //   {
			// 	name: '耗卡排行',
			// 	url: '/information/memberCardConsumptionRanking',
			// 	pd: true
			// }
      ]
			var xuanList1 = getXuan(xuanList, this.roles)
			this.$store.dispatch('user/changeXuan', {
				key: 'xuanList',
				value: xuanList1
			})
			this.$store.dispatch('user/changeXuan', {
				key: 'xuan',
				value: 1
			})
			this.timeCreated(1)
			this.getList()
		},
		methods: {
			suosouClick(){
				this.listQuery.page = 1
				this.getList()
			},
			getList(){
        this.listLoading = true
        var data = {
          start_time:this.birthday_start,
          end_time:this.birthday_end,
          limit:this.listQuery.limit
        }
        memberCostRanking(data).then(response => {
          const {
            data
          } = response
          this.total = data.total
          this.list = data.data
          this.zong_money = data.zong_money
          this.listLoading = false
        });
      },
			timeCreated(index){
				var now = new Date();
				var month = now.getMonth();
				var year = now.getFullYear();
				var first = new Date(year, month, 1);
				var prev_first = new Date(month<1?year-1:year, month<1?12-1+month:month-1, 1);
				var prev_last = new Date(year, month, 0);
				if(index === 1){
					this.birthday_start = first
					this.birthday_end = now
				}else{
					this.birthday_start = prev_first
					this.birthday_end = prev_last
				}
			},
			statisticsClick(index){
				if(index !== this.timeStatistics){
					this.timeStatistics = index
					this.timeCreated(index)
				}
			},
			timeChange(e){
				this.timeStatistics = 0
			}
		}
	}
</script>

<style scoped>
	.yh_content {
		padding: 20px;
	}
	.time-first {
	    border-radius: 4px 0 0 4px;
	}
	.time-last {
		border-radius: 0 4px 4px 0;
	}
	.time-cycle__item {
	    position: relative;
	    margin-left: -1px;
	    width: 72px;
	    height: 32px;
	    line-height: 32px;
	    text-align: center;
	    color: #787878;
	    border: 1px solid #d9d9d9;
	    cursor: pointer;
	}
	.time-cycle__item.curr {
	    border: 1px solid #6b7cdd;
	    color: #6b7cdd;
	    z-index: 2;
	}
	.total-box {
	    position: relative;
	    padding: 3px 60px 3px 0;
	    min-height: 20px;
	}
	.total-box var {
	    color: #6b7cdd;
	    font-style: normal;
	}

	/* 设置滚动条宽度和高度 */
	::v-deep .el-table__body-wrapper::-webkit-scrollbar {
		width: 20px;
		/* 横向滚动条 */
		height: 8px;
		/* 纵向滚动条 必写 */
	}
	/* 设置滚动条样式 */
	::v-deep .el-table__body-wrapper::-webkit-scrollbar-thumb {
		background-color: #dde;
		border-radius: 3px;
	}
	::v-deep .el-table--scrollable-x .el-table__body-wrapper {
	    scrollbar-width: thin;
	}
</style>
